<template>
  <div class="login_FX">
    <div class="x-mark" ref="xMark" @click="back">
      <div class="x-mark-container">
        <div class="left"></div>
        <div class="right"></div>
      </div>
    </div>
    <div class="intro-container" ref="introContainer">
      <h2 class="fancy-text">Warn Use</h2>
      <h1>WELCOME TO USE LET<br> THE SYSTEM TO THE INDIVIDUAL BELONGS</h1>

      <div class="button shift-camera-button">
        <div class="border">
          <div class="left-plane"></div>
          <div class="right-plane"></div>
        </div>
        <div class="text" @click="starts">去登录</div>
      </div>
    </div>
    <div class="sky-container" ref="skyContainer">
      <div class="text-right sky-container__left">
        <h2 class="portfolio">
          ENCOURAGE
        </h2>
        <h2 class="resurrection">
          FORWARD
        </h2>
      </div>
      <div class="text-left sky-container__right">
        <h2 class="08">
          08
        </h2>
        <h2 class="thirty-one">
          18
        </h2>
        <h2 class="2021">
          2022
        </h2>
      </div>
    </div>
    <div class="login_box" ref="loginBox">
      <div class="login_title">
        <h1>LET管理系统</h1>
        <h3>LET  MANAGEMENT  SYSTEM</h3>
      </div>
      <div class="login_form">
        <Form ref="formInline" :model="formInline" :rules="ruleInline">
          <Form-item prop="userName">
            <Input type="text" v-model="formInline.userName" placeholder="用户名/账号" @on-enter="handleLogin('formInline')">
              <Icon type="ios-person-outline" slot="prepend" />
            </Input>
          </Form-item>
          <Form-item prop="password">
            <Input type="password" v-model="formInline.password" placeholder="密码" @on-enter="handleLogin('formInline')">
              <Icon type="ios-eye-off-outline" slot="prepend" />
            </Input>
          </Form-item>
          <Form-item>
            <Button @click="handleLogin('formInline')" long :loading="loading">
              <span style="font-size: 14px;letter-spacing: 2px;">登录</span>
            </Button>
            <div class="back_password">
              <span @click="jumpPath('/backPwd')">找回密码</span>
            </div>
          </Form-item>
        </Form>
      </div>
    </div>
  </div>
</template>

<script>
  import '../../../../assets/js/TweenMax.min.js'
  import '../../../../assets/js/three.min.js'

  let width = window.innerWidth;
  let height = window.innerHeight;

  let camera, scene, renderer, plane;
  let raycaster = new THREE.Raycaster();
  let normalizedMouse = {
    x: 0,
    y: -180
  };
  let darkBlue = {
    r: 0,
    g: 52,
    b: 74
  };
  let baseColorRGB = darkBlue;
  let baseColor = "rgb(" + baseColorRGB.r + "," + baseColorRGB.g + "," + baseColorRGB.b + ")";
  let nearStars, farStars, farthestStars;

  function init() {
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera( 75, width/height, 0.1, 1000 );
    renderer = new THREE.WebGLRenderer();

    // Scene initialization
    camera.position.z = 50;

    renderer.setClearColor( "#121212", 1.0);
    renderer.setSize( width, height );
    renderer.setPixelRatio( window.devicePixelRatio );
    document.body.appendChild( renderer.domElement );

    // Lights
    let topLight = new THREE.DirectionalLight(0xffffff, 1);
    topLight.position.set(0,1,1).normalize();
    scene.add(topLight);

    let bottomLight = new THREE.DirectionalLight(0xffffff, 0.4);
    bottomLight.position.set(1,-1,1).normalize();
    scene.add(bottomLight);

    let skyLightRight = new THREE.DirectionalLight(0x666666, 0.2);
    skyLightRight.position.set(-1,-1,0.2).normalize();
    scene.add(skyLightRight);

    let skyLightCenter = new THREE.DirectionalLight(0x666666, 0.2);
    skyLightCenter.position.set(-0,-1,0.2).normalize();
    scene.add(skyLightCenter);

    let skyLightLeft = new THREE.DirectionalLight(0x666666, 0.2);
    skyLightLeft.position.set(1,-1,0.2).normalize();
    scene.add(skyLightLeft);

    // Mesh creation
    let geometry = new THREE.PlaneGeometry(400, 400, 70, 70);
    let darkBlueMaterial = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: THREE.FlatShading, side: THREE.DoubleSide, vertexColors: THREE.FaceColors} );

    geometry.vertices.forEach(function(vertice) {
      vertice.x += (Math.random() - 0.5) * 4;
      vertice.y += (Math.random() - 0.5) * 4;
      vertice.z += (Math.random() - 0.5) * 4;
      vertice.dx = Math.random() - 0.5;
      vertice.dy = Math.random() - 0.5;
      vertice.randomDelay = Math.random() * 5;
    });

    for ( var i = 0; i < geometry.faces.length; i ++ ) {
      geometry.faces[ i ].color.setStyle( baseColor );
      geometry.faces[ i ].baseColor =  baseColorRGB;
    }

    plane = new THREE.Mesh( geometry, darkBlueMaterial );
    scene.add( plane );

    // Create stars
    farthestStars = createStars(1200, 420, "#0952BD");
    farStars = createStars(1200, 370, "#A5BFF0");
    nearStars = createStars(1200, 290,"#118CD6");

    scene.add(farthestStars);
    scene.add(farStars);
    scene.add(nearStars);

    farStars.rotation.x = 0.25;
    nearStars.rotation.x = 0.25;
  }

  function createStars(amount, yDistance, color = "0x000000") {
    let opacity = Math.random();
    let starGeometry = new THREE.Geometry();
    let starMaterial = new THREE.PointsMaterial({color: color, opacity: opacity});

    for (let i = 0; i < amount; i++) {
      let vertex = new THREE.Vector3();
      vertex.z = (Math.random() - 0.5) * 1500;
      vertex.y = yDistance;
      vertex.x = (Math.random() - 0.5) * 1500;

      starGeometry.vertices.push(vertex);
    }
    return new THREE.Points(starGeometry, starMaterial);
  }

  let timer = 0;
  function render() {
    requestAnimationFrame( render );

    timer += 0.01;
    let vertices = plane.geometry.vertices;

    for (let i = 0; i < vertices.length; i++) {
      vertices[i].x -= (Math.sin(timer + vertices[i].randomDelay) / 40) * vertices[i].dx;
      vertices[i].y += (Math.sin(timer + vertices[i].randomDelay) / 40) * vertices[i].dy;
    }

    // Determine where ray is being projected from camera view
    raycaster.setFromCamera(normalizedMouse, camera);

    // Send objects being intersected into a variable
    let intersects = raycaster.intersectObjects([plane]);

    if (intersects.length > 0) {
      let faceBaseColor = intersects[0].face.baseColor;
      plane.geometry.faces.forEach(function(face) {
        face.color.r *= 255;
        face.color.g *= 255;
        face.color.b *= 255;
        face.color.r += (faceBaseColor.r - face.color.r) * 0.01;
        face.color.g += (faceBaseColor.g - face.color.g) * 0.01;
        face.color.b += (faceBaseColor.b - face.color.b) * 0.01;
        let rInt = Math.floor(face.color.r);
        let gInt = Math.floor(face.color.g);
        let bInt = Math.floor(face.color.b);

        let newBasecol = "rgb(" + rInt + "," + gInt + "," + bInt + ")";
        face.color.setStyle(newBasecol);
      });
      plane.geometry.colorsNeedUpdate = true;
      intersects[0].face.color.setStyle("#006ea0");
      plane.geometry.colorsNeedUpdate = true;
    }

    plane.geometry.verticesNeedUpdate = true;
    plane.geometry.elementsNeedUpdate = true;

    farthestStars.rotation.y -= 0.00001;
    farStars.rotation.y -= 0.00005;
    nearStars.rotation.y -= 0.00011;
    renderer.render(scene, camera);
  }
  // init();

  window.addEventListener("mousemove", function(event) {
    // Normalize mouse coordinates
    normalizedMouse.x = (event.clientX / width) * 2 - 1;
    normalizedMouse.y = -(event.clientY / height) * 2 + 1;
  });
  // render();

  export default {
    name: "login_FX",  // 菱形动画
    data() {
      return {
        pageIndex: 1,
        page1Opacity: 0,
        page2Opacity: 0,

        introContainer: null,
        skyContainer: null,
        login_box: null,
        xMark: null,

        loginBoxTop: -360,
        loginBoxOpacity: 0,
        fromUrl: '',
        loading: false,
        formInline: {
          userName: '',
          password: ''
        },
        ruleInline: {
          userName: [
            { required: true, message: '请填写用户名', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请填写密码', trigger: 'blur' },
            { type: 'string', min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
          ]
        },
      }
    },
    watch: {
      pageIndex: {
        handler(val) {
          if(val===1) {
            this.page1Opacity = 1;
            this.page2Opacity = 0;
          }else if(val===2) {
            this.page1Opacity = 0;
            this.page2Opacity = 1;
          }
        },
        immediate: true
      }
    },
    created() {
      init();
      render();
      window.onresize = () => {
        let widthR = window.innerWidth;
        let heightR = window.innerHeight;
        camera.aspect = widthR / heightR;
        camera.updateProjectionMatrix();
        renderer.setSize( widthR, heightR );
      };
      this.$nextTick(() => {
        let refs = this.$refs;
        this.introContainer = refs.introContainer;
        this.skyContainer = refs.skyContainer;
        this.xMark = refs.xMark;
        this.login_box = refs.loginBox;
      })
    },
    beforeDestroy() {
      // 1. 简单粗暴  直接删除画布
      let elem = document.querySelector('canvas');
      elem.parentNode.removeChild(elem);
    },
    methods: {
      starts() {
        // this.pageIndex = 2;
        let introTimeline = new TimelineMax();

        introTimeline.add([
          TweenLite.fromTo(this.introContainer, 0.5, {opacity: 1}, {opacity: 0, ease: Power3.easeIn}),
          TweenLite.to(camera.rotation, 3, {x: Math.PI / 2, ease: Power3.easeInOut}),
          TweenLite.to(camera.position, 2.5, {z: 20, ease: Power3.easeInOut}),
          TweenLite.to(camera.position, 3, {y: 120, ease: Power3.easeInOut}),
          TweenLite.to(plane.scale, 3, {x: 2, ease: Power3.easeInOut}),
        ]);

        introTimeline.add([
          TweenLite.to(this.xMark, 2, {opacity: 1, ease: Power3.easeInOut}),
          TweenLite.to(this.skyContainer, 2, {opacity: 1, ease: Power3.easeInOut}),
          TweenLite.to(this.login_box, 2, {opacity: 1, ease: Power3.easeInOut})
        ]);
      },
      back() {
        let outroTimeline = new TimelineMax();

        outroTimeline.add([
          TweenLite.to(this.xMark, 0.5, {opacity: 0, ease: Power3.easeInOut}),
          TweenLite.to(this.skyContainer, 0.5, {opacity: 0, ease: Power3.easeInOut}),
          TweenLite.to(this.login_box, 0.5, {opacity: 0, ease: Power3.easeInOut}),
          TweenLite.to(camera.rotation, 3, {x: 0, ease: Power3.easeInOut}),
          TweenLite.to(camera.position, 3, {z: 50, ease: Power3.easeInOut}),
          TweenLite.to(camera.position, 2.5, {y: 0, ease: Power3.easeInOut}),
          TweenLite.to(plane.scale, 3, {x: 1, ease: Power3.easeInOut}),
        ]);

        outroTimeline.add([
          TweenLite.to(this.introContainer, 0.5, {opacity: 1, ease: Power3.easeIn}),
        ]);
      },
      // 获取跳转到登录页面之前页面的路由传值
      getQueryUrl() {
        let fromUrl = this.$route.query.fromUrl;
        if(fromUrl && fromUrl !== undefined) {
          this.fromUrl = fromUrl
        }
      },
      handleLogin(name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            this.loading = true;
            this.$store.dispatch('Login', this.formInline).then(res => {
              console.log(res);
              this.loading = false;
              if(res && res.status) {
                if(this.fromUrl) {
                  this.$router.push({
                    path: this.fromUrl
                  })
                }else{
                  this.$router.push({
                    path: '/'
                  })
                }
              }
            })
          } else {
            this.$Message.error('请填写正确用户名或密码!');
          }
        })
      },
      jumpPath(path) {
        let that = this;
        that.$router.push({
          path: path
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .login_FX {
    position: fixed;
    margin: 0;
    /*background: #000;*/
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    .intro-container {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      color: white;
      text-align: center;
      margin: 0 auto;
      right: 0;
      left: 0;
      .fancy-text {
        font-family: "adobe-garamond-pro", sans-serif;
        font-style: italic;
        letter-spacing: 1px;
        margin-bottom: 17px;
      }
      h1 {
        font-family: "brandon-grotesque", sans-serif;
        font-weight: bold;
        margin-top: 0px;
        margin-bottom: 0;
        font-size: 20px;
      }
      @media screen and (min-width: 860px) {
        h1 {
          font-size: 40px;
          line-height: 52px;
        }
      }
      .button {
        position: relative;
        cursor: pointer;
        display: inline-block;
        font-family: "brandon-grotesque", sans-serif;
        text-transform: uppercase;
        min-width: 200px;
        margin-top: 30px;
        .border {
          border: 1px solid white;
          transform: skewX(-20deg);
          height: 32px;
          border-radius: 3px;
          overflow: hidden;
          position: relative;
          transition: 0.1s ease-out;
          .left-plane,
          .right-plane {
            position: absolute;
            background: white;
            height: 32px;
            width: 100px;
            transition: 0.15s ease-out;
          }
          .left-plane {
            left: 0;
            transform: translateX(-100%);
          }
          .right-plane {
            right: 0;
            transform: translateX(100%);
          }
        }
        .text {
          position: absolute;
          left: 0;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
          transition: 0.15s ease-out;
        }
      }
      .button:hover{
        .border {
          box-shadow: 0px 0px 10px 0px white;
          .left-plane,
          .right-plane {
            transform: translateX(0%);
          }
        }
        .text {
          color: #121212;
        }
      }
    }
    .x-mark {
      position: absolute;
      left: 10px;
      top: 10px;
      cursor: pointer;
      opacity: 0;
      .x-mark-container {
        position: relative;
        width: 20px;
        height: 20px;
        .left,
        .right {
          width: 2px;
          height: 20px;
          background: white;
          position: absolute;
          border-radius: 3px;
          transition: 0.15s ease-out;
          margin: 0 auto;
          left: 0;
          right: 0;
        }
        .right {
          transform: rotate(-45deg);
        }
        .left {
          transform: rotate(45deg);
        }
      }
    }
    .x-mark:hover {
      .right {
        transform: rotate(-45deg) scaleY(1.2);
      }
      .left {
        transform: rotate(45deg) scaleY(1.2);
      }
    }
    .sky-container {
      /*border: 1px solid #fff;*/
      position: absolute;
      color: white;
      text-transform: uppercase;
      margin: 0 auto;
      right: 0;
      left: 0;
      top: 2%;
      text-align: center;
      opacity: 0;
      .sky-container__left, .sky-container__right {
        display: inline-block;
        vertical-align: top;
        font-weight: bold;
        h2 {
          font-family: "brandon-grotesque", sans-serif;
          font-size: 20px;
          line-height: 26px;
          margin: 0;
        }
        @media screen and (min-width: 860px) {
          h2 {
            font-size: 36px;
            line-height: 68px;
          }
        }
        .thirty-one {
          letter-spacing: 4px;
        }
      }
      .sky-container__left {
        margin-right: 5px;
      }
      .text-right {
        text-align: left;
      }
      .text-left {
        text-align: right;
      }
    }
    @media screen and (min-width: 860px) {
      .sky-container {
        top: 18%;
        left: 12%;
        right: auto;
      }
    }
    .login_box{
      opacity: 0;
      width: 450px;
      height: 360px;
      background: rgba(0,0,0, 0.2);
      position: absolute;
      top: 18%;
      right: 15%;
      border-radius: 6px;
      padding: 20px 60px;
      transition: all 1s;
      .login_title{
        height: 90px;
        text-align: center;
        color: #aaa;
        font-family: 'corbel';
        border-bottom: 1px solid #666;
        h1{
          cursor: auto;
          letter-spacing: 2px;
        }
        h3{
          cursor: auto;
          font-size: 14px;
          letter-spacing: 3px;
        }
      }
      .login_form{
        padding: 20px 0;
        text-align: center;
        Button{
          background: rgba(2, 42, 59, 0.6);
          color: #fff;
          border: none;
        }
        .back_password{
          text-align: right;
          span{
            margin-right: 2px;
            margin-top: 6px;
            color: #aaa;
            cursor: pointer;
            font-size: 13px;
            letter-spacing: 0.5px;
          }
          span:hover{
            color: #999;
          }
        }
      }
    }
  }
</style>
